<!doctype html>
<html lang="en-us" dir="ltr">
  <head>
  <meta charset="utf-8">
    
  
    <!-- JS2CAL -->
	<link rel="stylesheet" type="text/css" href="<?php echo base_url();?>css/jscal2/jscal2.css" />
    <link rel="stylesheet" type="text/css" href="<?php echo base_url();?>css/jscal2/border-radius.css" />
    <link rel="stylesheet" type="text/css" href="<?php echo base_url();?>css/jscal2/gold/gold.css" />
    <script type="text/javascript" src="<?php echo base_url();?>js/jscal2/jscal2.js"></script>
    <script type="text/javascript" src="<?php echo base_url();?>js/jscal2/lang/th.js"></script>
    
    
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'เงินรับสุทธิ');

        data.addColumn('number', 'larn');
        //data.addColumn('number', 'Expenses');
        data.addRows([
          <?php 
          	foreach ($realtimeUpload as $row):
    		?>
    				['<?=$row['dateupload'];?>',<?=$row['totalbuynet'];?>],
    		<?php 	
    			endforeach;
          
          ?>
        ]);

        var options = {
          width: 400, height: 240,
          title: 'Company Performance',
          vAxis: {title: 'Year',  titleTextStyle: {color: 'red'} },
          hAxis: {showTextEvery:2, slantedText:false, slantedTextAngle:90},
          
        };

        var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
    
    
  </head>

  <body>
   <div id="chart_div"></div>
  
	<form action="<?php echo site_url('manager/supplies');?>" method="post">
    <table>
    	<thead>
    		<tr>
    			<th>ลาน</th>
    			<th>ช่วงเวลา</th>
    		</tr>
    	</thead>
      <tr>
      	<td>
      		<select name="pos">
      			<option value="">All</option>
      			<?php 
      			foreach ($pos_option as $eachpos):
      			?>
      				<option value="<?=$eachpos['posid'];?>" <?=($eachpos['posid']==$currentpos)?'selected':'';?> ><?=$eachpos['posname'];?></option>

      			<?php 
      			endforeach;
      			?>
      		</select>
      	</td>
        <td style="width: 20em">
  <input size="30" id="f_date1" name="date" value="<?=$currentdate;?>" /><button id="f_btn1">...</button><br />
         
        </td>
        <td>
        	<input type="submit" value="submit"/>
        </td>
      </tr>
    </table>
    
    </form>
    <script type="text/javascript">//<![CDATA[

      var SELECTED_RANGE = null;
      function getSelectionHandler() {
              var startDate = null;
              var ignoreEvent = false;
              return function(cal) {
                      var selectionObject = cal.selection;

                      // avoid recursion, since selectRange triggers onSelect
                      if (ignoreEvent)
                              return;

                      var selectedDate = selectionObject.get();
                      if (startDate == null) {
                              startDate = selectedDate;
                              SELECTED_RANGE = null;
                              document.getElementById("info").innerHTML = "Click to select end date";

                              // comment out the following two lines and the ones marked (*) in the else branch
                              // if you wish to allow selection of an older date (will still select range)
                              cal.args.min = Calendar.intToDate(selectedDate);
                              cal.refresh();
                      } else {
                              ignoreEvent = true;
                              selectionObject.selectRange(startDate, selectedDate);
                              ignoreEvent = false;
                              SELECTED_RANGE = selectionObject.sel[0];

                              // alert(SELECTED_RANGE.toSource());
                              //
                              // here SELECTED_RANGE contains two integer numbers: start date and end date.
                              // you can get JS Date objects from them using Calendar.intToDate(number)

                              startDate = null;
                              document.getElementById("info").innerHTML = selectionObject.print("%Y-%m-%d") +
                                      "<br />Click again to select new start date";

                              // (*)
                              cal.args.min = null;
                              cal.refresh();
         this.hide();
                      }
              };
      };

      Calendar.setup({
              //cont          : "cont",
     inputField : "f_date1",
     trigger    : "f_btn1",
              fdow          : 1,
              selectionType : Calendar.SEL_SINGLE,
              onSelect      : getSelectionHandler()
      });

    //]]></script>
    
    
    
    <table>
    	<thead>
    		<tr>
    			<th>Date/time</th>
    			<th>ลาน</th>
    			<th>เงินจ่ายสุทธิ</th>
    			<th>รับเงิน</th>
    		</tr>
    	</thead>
    	<tbody>
    		<?php 
    			foreach ($realtimeUpload as $row):
    		?>
    				<tr>
    					<td><?php echo $row['dateupload'];?> </td>
    					<td><?php echo $row['larn'];?> </td>
    					<td><?php echo $row['totalbuynet'];?> </td>
    					<td><?php echo $row['totalnetwght'];?></td>
    				</tr>
    		<?php 	
    			endforeach;
    		?>
    	
    	</tbody>
 	</table>
    
  </body>
</html>